﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="TextPosition.aspx.cs" Inherits="ControlExplorer.C1LightBox.TextPosition" %>
<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1LightBox" TagPrefix="wijmo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<wijmo:C1LightBox ID="C1LightBox1" runat="server" Player="Img">
	<Items>
		<wijmo:C1LightBoxItem ID="LightBoxItem1" Title="Abstract1" Text="Abstract1"
			ImageUrl="http://lorempixum.com/120/90/abstract/1" 
			LinkUrl="http://lorempixum.com/600/400/abstract/1" />
		<wijmo:C1LightBoxItem ID="LightBoxItem2" Title="Abstract2" Text="Abstract2"
			ImageUrl="http://lorempixum.com/120/90/abstract/2" 
			LinkUrl="http://lorempixum.com/600/400/abstract/2" />
		<wijmo:C1LightBoxItem ID="C1LightBoxItem3" Title="Abstract3" Text="Abstract3"
			ImageUrl="http://lorempixum.com/120/90/abstract/3" 
			LinkUrl="http://lorempixum.com/600/400/abstract/4" />
		<wijmo:C1LightBoxItem ID="C1LightBoxItem4" Title="Abstract4" Text="Abstract4"
			ImageUrl="http://lorempixum.com/120/90/abstract/4" 
			LinkUrl="http://lorempixum.com/600/400/abstract/4" />
	</Items>
</wijmo:C1LightBox>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">

<p>
此示例演示了一段文字和其由C1LightBox支持的可能的位置和风格。
</p>

<p>
改变一段文字的位置或风格，只需改变的<strong> TextPosition</strong>属性的下列值之一：
</p>

<ul>
<li>None -没有文字显示。</li>
<li>Inside - 并排显示内容容器內部的文字说明。</li>
<li>Outside - 显示的内容容器外的文字说明。</li>
<li>Overlay - 显示内容覆盖内容容器内的文字说明。</li>
<li>TitleOverlay - 显示只覆盖标题的内容容器内的文字说明。</li>
</ul>

<p>
</p>

</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">

<script type="text/javascript">
	$(function () {
		$('#textposition').change(function () {
			$("#<%=C1LightBox1.ClientID%>").c1lightbox('option', 'textPosition', $(this).val());
		});

	});
</script>

<div class="demo-options">
<!-- Begin options markup -->
	<h6>
		文本位置 :</h6>
			<select id="textposition">
				<option value="inside" selected='true'>內部</option>
				<option value="outside">外部</option>
				<option value="overlay">覆盖</option>
				<option value="titleOverlay">标题覆盖</option>
				<option value="none">无</option>
			</select>
<!-- End options markup -->
</div>

</asp:Content>
